@import '../../ui/base'

.root
  input
    display none

.single
  position relative
  color $font-color
  width 100px
  height 100px
  border 1px solid $border-color
  @extends .h-center
  justify-content center
  > span
    width 100%
    font-size 10px
    text-align center

.img
  background-repeat no-repeat
  background-position 50%
  width 100%
  height 100%
  position absolute
  left 0
  top 0

.root.fillImage
  align-items flex-end
  > span
    background-color rgba(0,0,0,.6)
    color #fff
    z-index 2

.multi
  ul
    clear fix
  li
    float left
    background-position 50%
    background-size cover
    background-repeat no-repeat
    position relative
    &.add
      border 2px dashed #bbb
      a
        width 100%
        height 100%
        justify-content center
        i
          font-size 18px
          color #aaa
          margin 0

.loading
  width 100%
  position absolute
  bottom 0
  left 0
  z-index 2

.cover
  position absolute
  width 100%
  height 100%
  background-color rgba(255, 255, 255, .5)
  z-index 1
  left 0
  top 0

.multi
  padding 10px
  border 1px solid $border-color
  > div
    margin-bottom 20px

.root.multi.empty
  display none

.add-img
  cursor pointer
  &:hover
    .add-img-edit-cover
      display block

.add-img-edit-cover
  position absolute
  width 100%
  height 100%
  left 0
  top 0
  background-color rgba(0,0,0,.35)
  display none

.add-img-close
  position absolute
  right 0px
  top 0px
  z-index 10
  i
    color #fff

.add-img-tick
  position absolute
  left 50%
  top 50%
  width 18px
  height 18px
  margin-left -9px
  margin-top -9px
  border-radius 50%
  color #14bf14
  font-size 25px
  background-color rgba(255,255,255, .8)
  box-shadow 1px 1px 2px rgba(0,0,0,.35)
  